<!-- 调查工作进度 -->
<template>
  <div class="whole-process-container">
    <el-row style="margin-bottom:10px;">
      <el-col :span="4">
        <div style="min-height: 1px;"></div>
      </el-col>
      <el-col :span="16" align="center">
        <h3>调查工作进度</h3>
        <h6 style="color:red">仅上报县级调查情况，不涉及省级和市级，由县级账号进入填写上报</h6>
        <el-select v-model="cityId" placeholder="请选择市" style="width: 200px;" clearable size="small" v-permission="[1]">
          <el-option v-for="(val, key) in city" :filterable="true" :key="key" :label="val" :value="key">
          </el-option>
        </el-select>
        <el-select v-model="areaId" placeholder="请选择区县" ref="area" clearable size="small" @change="setData(areaId)" v-permission="[1, 3]">
          <el-option v-for="(val, key) in area" :filterable="true" :key="key" :label="val" :value="key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" align="right">
            <div style="min-height: 1px;"></div>
        <el-button v-if="processData.status === 'BC' " @click="saveProgress" type="primary"
          v-permission="[4]">保存</el-button>
        <!-- <el-button v-if="processData.status === 'BC' " @click="submitProgress" type="primary">提交</el-button> -->
      </el-col>
    </el-row>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="ny">
        <template slot="title">#1 内业</template>
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否完成:</span>
            <el-radio-group v-model="processData.ny_sfwc" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">完成时间:</span>
            <el-date-picker
              v-model="processData.ny_wcsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#2 外业" name="wy">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否完成:</span>
            <el-radio-group v-model="processData.wy_sfwc" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">完成时间:</span>
            <el-date-picker
              v-model="processData.wy_wcsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#3 建库" name="jk">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否完成:</span>
            <el-radio-group v-model="processData.jk_sfwc" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">完成时间:</span>
            <el-date-picker
              v-model="processData.jk_wcsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
          <el-col :span="8">
            <div class="tudou-input-suffix">
              完成比例：
              <el-tooltip class="item" effect="dark" content="如未完成请填写已完成的比例" placement="top-start">
                <!-- <el-input-number
                  v-model="processData.jk_wcbl"
                  controls-position="right"
                  :min="0"
                  :max="100"
                ></el-input-number> -->
                <div class="el-input el-input-group el-input-group--append el-input--suffix">
                    <input v-model="processData.jk_wcbl" v-nativeMoney type="text" autocomplete="off" placeholder="完成比例" class="el-input__inner">
                    <div class="el-input-group__append"> %</div>
                </div>
              </el-tooltip>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#4 数据库质检" name="sjkzj">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否通过质检:</span>
            <el-radio-group v-model="processData.sjkzj_sftg" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">质检通过时间:</span>
            <el-date-picker
              v-model="processData.sjkzj_tgsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#5 县级自检" name="xjzj">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否进行自检:</span>
            <el-radio-group v-model="processData.xjzj_sfzj" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">完成时间:</span>
            <el-date-picker
              v-model="processData.xjzj_wcsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="完成时间"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#6 县级调查成果上报" name="xjdcjgsb">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否上报:</span>
            <el-radio-group v-model="processData.xjdcjgsb_sfsb" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">上报时间:</span>
            <el-date-picker
              v-model="processData.xjdcjgsb_sbsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#7 省级核查" name="sjhc">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否通过核查:</span>
            <el-radio-group v-model="processData.sjhc_sftghc" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">核查时间:</span>
            <el-date-picker
              v-model="processData.sjhc_hcsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#8 省级核查整改意见" name="sjhczgyj">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">返回县意见时间:</span>
            <el-date-picker
              v-model="processData.sjzgyj_fhxyjsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">完成整改时间:</span>
            <el-date-picker
              v-model="processData.sjzgyj_zgwcsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#9 省级再核查" name="sjzhc">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否通过:</span>
            <el-radio-group v-model="processData.sjzhc_sftg" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">上报国家时间:</span>
            <el-date-picker
              v-model="processData.sjzhc_sbgjsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#10 国家级核查" name="gjjhc">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否通过核查:</span>
            <el-radio-group v-model="processData.gjjhc_sfhctg" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">核查时间:</span>
            <el-date-picker
              v-model="processData.gjjhc_hcsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#11 国家核查结果反馈" name="gjhcjgfk">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否反馈:</span>
            <el-radio-group v-model="processData.gjhcjgfk_sffk" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">反馈时间:</span>
            <el-date-picker
              v-model="processData.gjhcjgfk_fksj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#12 地方整改情况" name="dfzgqk">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否完成整改:</span>
            <el-radio-group v-model="processData.dfzgqk_sfwczg" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">是否上报:</span>
            <el-radio-group v-model="processData.dfzgqk_sfsb" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">上报时间:</span>
            <el-date-picker
              v-model="processData.dfzgqk_sbsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#13 地方申请在线核查" name="dfsqzxhc">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否申请:</span>
            <el-radio-group v-model="processData.dfsqzxhc_sfsq" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">是否在线核查:</span>
            <el-radio-group v-model="processData.dfsqzxhc_sfzxhc" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">完成核查时间:</span>
            <el-date-picker
              v-model="processData.dfsqzxhc_wchcsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否修改:</span>
            <el-radio-group v-model="processData.dfsqzxhc_sfxg" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">修改后上报时间:</span>
            <el-date-picker
              v-model="processData.dfsqzxhc_xghsbsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#14 成果汇总" name="cghz">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否完成:</span>
            <el-radio-group v-model="processData.cghz_sfwc" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">完成时间:</span>
            <el-date-picker
              v-model="processData.cghz_wcsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#15 成果预检" name="cgyj">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否申请:</span>
            <el-radio-group v-model="processData.cgyj_sfsq" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">是否完成:</span>
            <el-radio-group v-model="processData.cgyj_sfwc" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">完成时间:</span>
            <el-date-picker
              v-model="processData.cgyj_wcsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="#16 成果验收" name="cgys">
        <el-row class="v-align">
          <el-col :span="8">
            <span class="demonstration">是否完成:</span>
            <el-radio-group v-model="processData.cgys_sfwc" size="mini">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <span class="demonstration">完成时间:</span>
            <el-date-picker
              v-model="processData.cgys_wcsj"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <backTop></backTop>
  </div>
</template>

<script>
import backTop from "@/components/common/BackTop";
import report from "../../apiUrl/reportApi";
import pca from '@/libs/pca-code'

export default {
  components: {
    backTop
  },
  data() {
    return {
      activeNames: [],
      processData: { 
          status: 'BC',
          id: '' 
      },
      category: {
        ny: { rate: 0 },
        wy: { rate: 0 },
        jk: { rate: 0 },
        sjkzj: { rate: 0 },
        xjzj: { rate: 0 },
        xjdccgsb: { rate: 0 },
        sjhc: { rate: 0 },
        sjhczgyj: { rate: 0 },
        sjzhc: { rate: 0 },
        gjjhc: { rate: 0 },
        gjhcjgfk: { rate: 0 },
        dfzgqk: { rate: 0 },
        dfsqzxhc: { rate: 0 },
        cghz: { rate: 0 },
        cgyj: { rate: 0 },
        cgys: { rate: 0 }
      },
      cityId: '',
      areaId: '',
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    setData(id) {
      report.getProgressReport(id ? {area_id: id} : null).then(rs => {
          if(rs.data.data){
              if(rs.data.data.id){
                this.processData = rs.data.data
              }
              // this.processData.ny_sfwc = "1"
          }
      })
    },
    saveProgress() {
        if(!this.checkWcsj()){
            return
        }
        report.saveProgressReport(this.processData).then(rs => {
            if (rs.data.success) {
                this.processData.id = rs.data.data
                this.$alert("保存成功", "提示", {
                    confirmButtonText: "确定",
                    type: "success",
                    callback: action => {}
                });
            }else {
                this.$alert(rs.data.message, "提示", {
                    confirmButtonText: "确定",
                    type: "warning",
                    callback: action => {}
                });
            }
        });
    },
    checkWcsj(){
        let result = true , mesg=""
        if(this.processData.ny_sfwc==1 && this.checkIsNull(this.processData.ny_wcsj)){
            mesg ="<h6>内业已完成必须填写完成时间</h6>"
            result =  false
        }
        if(this.processData.wy_sfwc==1 && this.checkIsNull(this.processData.wy_wcsj)){
            mesg +="<h6>外业已完成必须填写完成时间</h6>"
            result =  false
        }
        if(this.processData.jk_sfwc==1 && this.checkIsNull(this.processData.jk_wcsj)){
            mesg +="<h6>建库已完成必须填写完成时间</h6>"
            result =  false
        }
        if(this.processData.xjdcjgsb_sfsb==1 && this.checkIsNull(this.processData.xjdcjgsb_sbsj)){
            mesg +="<h6>县级成果已上报必须填写上报时间</h6>"
            result =  false
        }
        if(!result){
            this.$message.error({
                dangerouslyUseHTMLString: true,
                message: mesg
            })
        }
        return result
    },
    checkIsNull(val){
        if (val == null || val == undefined || val == ''){
            return true
        }
        return false
    },
    submitProgress() {
        this.processData.status = "TJ"
        this.saveProgress()
    }
  },
  mounted(){
    // 市限
    this.cityId = Object.keys(this.city)[0]
    this.$nextTick(() => {
      this.areaId = this.$store.getters.userType === 4 ? this.$store.getters.areaId : Object.keys(this.area)[0]
      this.setData(this.areaId)
    })
  },
   computed: {
    city() {
      let type = this.$store.getters.userType
      if (type === 1) {
        return pca[610000]
      } else {
        return []
      }
      
    },
    area() {
      let type = this.$store.getters.userType
      if (type === 1) {
        this.areaId = ''
        return this.cityId ? pca[this.cityId] : {}
      } else {
        return pca[this.$store.getters.cityId]
      }
    },
  }
};
</script>

<style>
.tudou-input-suffix {
  margin-bottom: 15px;
}
.tudou-input-suffix .el-input {
  margin-right: 15px;
  width: 180px;
}
</style>
